<template>
    <div class="msgContent flexList fs-xs">
        <div class="flexList w-100 msgLabel ">
            <div class="filedName col-sm-1 text-left">全选
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
                    style="display: inline;">
                </el-checkbox>
            </div>
            <div class="filedName col-sm-3 text-center">字段说明</div>
            <div class="filedName col-sm-2 text-center">目标字段</div>
            <div class="filedName col-sm-6 text-left">源字段</div>
            <div class="filedName col-sm-1 text-left">字段类型</div>
            <div class="filedName col-sm-1 text-left">字段长度</div>

        </div>

        <div class="flexList w-100 msgLabel" v-for="(dbField, i) in dbFields" :key="i">
            <div class="msgVal col-sm-1  text-center">
                <el-checkbox-group v-model="checkedDbFields" @change="dbChange">
                    <el-checkbox :label="dbField">
                        {{ empty }}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
            <div class="msgVal col-sm-3  text-center">
                {{ dbField.dbColumnMemo }}
            </div>
            <div class="msgVal col-sm-2  text-center">
                {{ dbField.dbColumnName }}
                <span class="text-danger" v-if="mustArry.indexOf(dbField.dbColumnName) > -1">*</span>
            </div>

            <div class="msgVal selectShow  col-sm-6 flexList ">

                <el-select filterable clearable v-model="form[dbField.dbColumnName]" class="w-50 mr-1" size="small"
                    @change="change($event, dbField.dbColumnMemo)">
                    <el-option :label="v.value" :value="v.value" v-for="(v, i) in excelList" :key="i"></el-option>
                </el-select>
                <!--        <yzselect :dict="excelList" v-model="form" :bound="[dbField.dbColumnName]" size="small"-->
                <!--          @change="change($event,dbField.dbColumnMemo,i)" class="w-50 mr-1">-->
                <!--        </yzselect>-->
                {{ (form[dbField.dbColumnName] == dbField.dbColumnName || form[dbField.dbColumnName] ==
                    dbField.dbColumnMemo) ? '' : '*该字段没有可匹配的字段' }}
            </div>
            <div class="msgVal selectShow col-sm-1 flexList ">
                {{ dbField.dbColumnType }}
            </div>
            <div class="msgVal selectShow col-sm-1 flexList ">
                {{ dbField.columnLength }}
            </div>
        </div>
    </div>

</template>

<script>
export default {
    props: {
        excelFields: Array,
        module: String,
        form: Object,
        dbFields: Array,
        ChooseFields: Array,
        mustArry: Array
    },
    model: {
        prop: "form",
        event: "input"
    },
    data() {
        return {
            excelList: [],
            isMatch: true,
            checkAll: false,
            isIndeterminate: false,
            checkedDbFields: [],
            empty: "",
            showText: false
        }
    },

    methods: {
        change(e, memo) {
            this.$forceUpdate()
            this.$emit("input", this.form)
            this.$emit("change", this.form)
            let data = {}
            data = this.dbFields.filter(v => {
                return memo == v.dbColumnMemo
            })[0]
            if (e.value != "") {
                if (!this.checkedDbFields.filter(v => {
                    return v.dbColumnMemo == data.dbColumnMemo
                })[0]) {
                    this.checkedDbFields.push(data)
                }
            } else {
                let index = this.checkedDbFields.findIndex(item => item.dbColumnMemo == data.dbColumnMemo)
                if (index > -1) {
                    this.checkedDbFields.splice(index, 1)
                }
            }
            this.dbChange()


        },
        dbChange() {
            this.$emit("dbChange", this.checkedDbFields)
        },
        handleCheckAllChange(e) {
            this.isIndeterminate = false
            this.checkedDbFields = e ? this.dbFields : []
            if (this.checkedDbFields.length == 0) {
                this.checkAll = false
            } else {
                this.checkAll = true
            }
            this.dbChange()
        },
        checkMatch() {
            this.dbFields.forEach(i => {
                let data = ''
                data = this.excelFields.filter(v => {
                    return v.toLowerCase() == i.dbColumnName || v == i.dbColumnMemo
                })[0]
                if (data) {
                    this.checkedDbFields.push(i)
                }
            })
            this.dbChange()
        }
    },
    watch: {
        dbFields: {
            immediate: true,
            handler(e) {
                this.lowDbFields = e
                this.checkMatch()
            }

        },
        excelFields: {
            deep: true,
            immediate: true,
            handler(list) {

                this.excelList = [{
                    name: "请选择",
                    value: ""
                }]
                list.forEach(item => {
                    this.excelList.push({
                        name: item,
                        value: item.toLowerCase()
                    })
                })
            }
        },
        mustArry: {
            deep: true,
            handler(arr) {
                this.mustArry = arr

            }
        },
        checkedDbFields: {
            immediate: true,
            deep: true,
            handler(e) {
                this.checkAll = this.dbFields.length > 0 && (e.length == this.dbFields.length)
                this.isIndeterminate = e.length > 0 && e.length < this.dbFields.length;

            }

        }
    }
}
</script>

<style lang="scss" scoped></style>